<template>
  <div class="home">
    <div class="map" id="container"></div>
  </div>
</template>
 <script>
// @ is an alias to /src
import iconGreen from "@/assets/green.png";
export default {
  name: 'worldMap',
  components: {
    
  },
  
  data () {
    return {
      map: '',
      infoWindow: '',
      marker: '',
      // timer: '',
      n: 0,
      list: [
        {
          name: '安哥拉',
          longitude: '12.222318',
          latitude: '-4.909572',
          year:'2017'
        },
        {
          name: '诺福克岛',
          longitude: '167.953035',
          latitude: '-29.035248',
          year:'2021'
        }               
      ]
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 初始化地图控件方法
    initMap() {
      this.map = new AMap.Map(document.getElementById("container"), {
        mapStyle: 'amap://styles/normal',
        resizeEnable: false,
        center: [this.list[0].longitude, this.list[0].latitude],//地图中心点
        zoom: 4,//地图显示的缩放级别
        keyboardEnable: false,
        zoomEnable: true,
        dragEnable: true,
        animateEnable: true
      });
      // 循环初始化所有坐标点
      this.list.forEach(v => {
        this.initMarker({ lng: v.longitude, lat: v.latitude }, v);
        this.n ++;
      })
      // 通过定时器对地图坐标进行轮播
      // this.setInter()
    },
    // 初始化坐标点的icon
    initMarker(location, item) {
      // console.log('Location', location, item)
      // 生成坐标点icon
      let icon = new AMap.Icon({
        size: new AMap.Size(20, 20),
        image: iconGreen,
        imageSize: new AMap.Size(20, 20)
      });
      // 坐标点 生成方法
      this.marker = new AMap.Marker({
        icon: icon, // 坐标点图标
        position: [location.lng, location.lat], // 左边点的经纬度
        offset: new AMap.Pixel(0, -30) // 坐标点偏移量
      });
      this.marker.setLabel({
        offset:new AMap.Pixel(0,0),
        content:this.createInfoWindow(this.list[this.n]),
        direction:'bottom'
      });
      // 坐标点添加点击事件 用来打开自定义窗口 也可直接添加窗口自动全部打开状态
      // this.marker.on('click', (e) => {
      //   // console.log('marker 添加点击事件：', e, e.pixel.x, e.pixel.y)
      //   this.initInfoWindow(location.lng, location.lat, item)
      //   // 点击当前标点移动至地图中心点
      //   this.setCenter(location.lng, location.lat)
      //   this.infoWindow.open(this.map, e.lnglat)
      // })
      // 初始化坐标点自定义窗口
      this.initInfoWindow(location.lng, location.lat, item)
      // 打开窗口的方法 这里也可以通过 点击坐标点打开
      this.infoWindow.open(this.map, {Q: location.lat, R: location.lng, lat: location.lat, lng: location.lng})
      // 
      this.marker.setMap(this.map)
    },
    // 初始化信息窗体
    initInfoWindow(lng, lat, item) {
      // console.log('创建了信息窗体')
      this.infoWindow = new AMap.InfoWindow({
        isCustom: false,  //使用自定义窗体
        anchor: 'bottom-center',
        content: '',
        offset: new AMap.Pixel(0, -20),
        autoMove: true,
        closeWhenClickMap: false,
      });
    },
    // 创建信息窗体
    createInfoWindow(item) {
      if(this.n<this.list.length -1 ){
        // this.n = this.n -1;
        console.log(this.n)
        // ++this.n;
      }
      return `
        <div class="dn-info-window">
          <div class="dn-info-name">${item.name}</div>
          <div class="dn-info-num">发生年份：<span>${item.year}</span></div>
        </div>
      `
    }
    // 轮循坐标点方法
    // setInter() {
    //   this.timer = setInterval(() => {
    //     // 轮播当前标点移动至地图中心点
    //     this.setCenter(this.list[this.n].longitude, this.list[this.n].latitude)
    //     this.initMarker({ lng: this.list[this.n].longitude, lat: this.list[this.n].latitude }, this.list[this.n])
    //     if (this.n == (this.list.length - 1)) {
    //       this.n = 0
    //     } else {
    //       this.n++
    //     }
    //   }, 1000)
    // },
    // 当前标点移动至地图中心
    // setCenter (long, lati) {
    //   this.map.setCenter([long, lati])
    // }
  }

  // beforeDestroy () {
  //   clearInterval(this.timer)
  // }
}
</script>
<style lang="less" scoped>
.map{
  width: 100%;
  height: 1000px;
}
// 自定义窗体的样式  
/deep/.info-window {
  padding: 10px;
  background: rgba(4, 77, 145, 0.753);
  color: #3196FA;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
 
  .info-name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
 
  .info-num {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #A5A3A1;
 
    >span {
      font-size: 14px;
      color: #3196FA;
 
      &.active-color {
        color: #EF4864;
      }
    }
  }
}
</style>
